<template>
  <div :style="{width: '100%',height: zoneTreeHeight}" style="border: 1px solid #EEEEEE;">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText" style="padding: 10px 10px 0;"/>
    <el-scrollbar style="height: 94.4%;">
      <el-tree :data="treeData"
               ref="tree"
               node-key="id"
               class="filter-tree"
               style="padding-top: 10px;"
               default-expand-all
               :highlight-current="true"
               :check-on-click-node="true"
               :expand-on-click-node="false"
               :props="defaultProps"
               :filter-node-method="filterNode"
               @node-click="handleNodeClick">
        <template slot-scope="{ node, data }">
          <div style="display: flex;align-items: center;line-height: 100%;font-size: 14px;" v-if="!data.disabled">
            <img :src="getRegionNodeImage(data)" style="width: 16px;height: 16px;margin-right: 5px;">
            <span style="font-size: 12px;">{{ data.name }}</span>
          </div>
          <div v-else style="display: flex;align-items: center;line-height: 100%;color: red;font-size: 14px;"
               :disabled="true">
            <img :src="getRegionNodeImage(data)" style="width: 16px;height: 16px;margin-right: 5px;">
            <span style="font-size: 12px;">{{ data.name }}</span>
          </div>
        </template>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
import {listZone} from "@/api/leakage/zone";
import {findFirstElement} from '@/utils/customUtil'
import screenfull from "screenfull";

export default {
  name: "RegionTree",
  props: {
    nodeType: {
      type: String,
      default: ''
    },
    treeLoaded: {
      type: Function,
      default: () => {
      }
    }
    ,
    nodeClick: {
      type: Function,
      default:
          (node) => {
          }
    }
  },
  data() {
    return {
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: 'disabled'
      },
      screenHeight: undefined,
      isFullscreen: false
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {
    zoneTreeHeight() {
      return (this.screenHeight - 100) + 'px'
    }
  },
  methods: {
    resizeHeight(height) {
      this.screenHeight = height;
      // this.$nextTick(() => {
      //   this.zoneTreeHeight;
      // })
    },
    getTreeData() {
      listZone({}).then(response => {
        this.treeData = response;
        this.selectFirstNode()
        this.treeLoaded()
        // if (this.nodeType) {
        //   this.treeData.forEach(node => this.disableNode(node))
        // }
      });
    },
    selectFirstNode() {
      if (this.nodeType !== '') {
        const target = this.findFirstNode(this.treeData, this.nodeType)
        if (target != null) {
          this.handleNodeClick(target)
        }
      } else {
        const firstNode = this.treeData[0]
        if (firstNode && firstNode.children.length) {
          this.handleNodeClick(firstNode.children[0])
        }
      }
    },
    disableNode(node) {
      if (node.levelType !== this.nodeType) {
        node.disabled = true
      } else {
        node.disabled = false
      }
      if (node.children && node.children.length) {
        node.children.forEach(child => this.disableNode(child))
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    findFirstNode(nodes, type) {
      let value = null;
      for (let index = 0; index < nodes.length; index += 1) {
        if (nodes[index].levelType === type) {
          value = nodes[index];
          break;
        }
        if (nodes[index].children instanceof Array && nodes[index].children.length > 0) {
          const text = this.findFirstNode(nodes[index].children, type);
          if (text)
            return text;
        }
      }
      return value;
    },
    handleNodeClick(data) {
      this.nodeClick(data)
    },
    getRegionNodeImage(data) {
      const images = ['dfq1', 'dma1', 'dyh1', 'lod', 'root']
      return require(`@/assets/leakage/` + images[parseInt(data.levelType) - 1] + '.png')
    },
    getZoneNode(areaId){
      console.log('areaId is ', areaId)
      return findFirstElement(this.treeData, 'areaId', areaId);
    },
    getZoneName(areaId) {
      const target = findFirstElement(this.treeData, 'areaId', areaId);
      return target ? target.areaName : ''
    },
    //监听全屏事件
    listenScreenFull() {
      //监听f11事件
      window.addEventListener("keydown", this.KeyDown, true);
      //这些监听,可以监听到esc按键按下导致的全屏变化,但是监听不到F11的打开全屏的变化,isScreenFull
      document.addEventListener("fullscreenchange", () => {
        this.isFullscreen = !this.isFullscreen;//你要切换得图标使用得属性
      });
      document.addEventListener("mozfullscreenchange", () => {
        this.isFullscreen = !this.isFullscreen;
      });
      document.addEventListener("webkitfullscreenchange", () => {
        this.isFullscreen = !this.isFullscreen;
      });
      document.addEventListener("msfullscreenchange", () => {
        this.isFullscreen = !this.isFullscreen;
      });
    },
    KeyDown(event) {
      if (event.keyCode === 122) {
        event.returnValue = false;

        this.isScreenFull(); //触发全屏的方法
      }
    },
    //全屏方法
    isScreenFull() {
      if (!screenfull.isEnabled) {
        return false;
      }

      this.screenHeight = document.body.clientHeight

      // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
      // 无需自己再判断当前屏幕状态
      screenfull.toggle();
    },
  },
  created() {
    this.screenHeight = document.body.clientHeight
  },
  mounted() {
    this.getTreeData()
    this.listenScreenFull()
  }
}
</script>

<style>
.el-tree > :nth-child(n+1) {
  min-width: 100%;
  display: inline-block;
}
</style>
